<template>
  <!-- 退货20 refundMoney-->
  <div>
    <header class="RMFintColor">
      <van-row>
        <van-col class="RMMarginTop" span="24">
          <van-row class="RMtextBox">
            <van-col @click="refundMoneyNext">
              <van-icon name="arrow-left" size="40" />
            </van-col>
            <van-col> 申请退款 </van-col>
          </van-row>
        </van-col>
      </van-row>
    </header>
    <section style="margin-top: 55px"></section>
    <!-- 商品信息 -->
    <form>
      <!--  商品信息-->
      <van-row class="RMBorderStyleTop RMPaddingTopSmall">
        <van-col offset="1" span="5">
          <van-image
            width="80"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </van-col>
        <van-col offset="1" span="13" class="RMPaddingMax">
          <van-row>
            <van-col class=""> 黑美人西瓜鲜美多汁2个起卖 </van-col>
          </van-row>
          <van-row>
            <van-col class="RMFintSizeSmallS RMPaddingSmallS">
              独立包装（1个装）X1
            </van-col>
          </van-row>
          <van-row>
            <van-col class="RMFintSizeMax RMFintColorRed RMPaddingSmallS">
              ￥38.8
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <!-- 退货原因选择 -->
      <van-row class="RMseltectBox">
        <van-col offset="1" span="8"> 退货原因 </van-col>
        <van-col span="13">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label=""
            placeholder="请选择退货原因"
            @click="showPickerDown"
            input-align="left"
          />
          <van-popup
            v-model="showPicker"
            position="bottom"
            class="heightSelect"
            @click="showPickerUp"
          >
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
        </van-col>
        <van-col @click="showPickerDown">
          <van-icon :name="arrowA" />
        </van-col>
      </van-row>
      <!-- 退款金额 -->
      <van-row class="RMPaddingSmall">
        <van-col offset="1" class="RMFintSizeMax"> 实付金额： </van-col>
        <van-col offset="1" class="RMFintSizeMax RMFintColorRed">
          ￥116.35
        </van-col>
      </van-row>
      <!-- 详细说明 -->
      <van-row class="RMPaddingSmall">
        <van-col offset="1" class="RMFintSizeMax"> 详细说明： </van-col>
        <van-col offset="0" class="RMFintSizeMax">
          <input type="text" name="" id="" class="RMIptBox" />
        </van-col>
      </van-row>
      <!-- 图片上传 -->
      <van-row class="">
        <van-col offset="1" class="RMFintSizeMax RMpadiingXXMAX">
          上传图片:
        </van-col>
        <van-col offset="0">
          <van-field name="uploader" class="RMFintSizeMax">
            <template #input>
              <van-uploader v-model="uploader" />
            </template>
          </van-field>
        </van-col>
      </van-row>
      <van-row>
        <van-col offset="7" class="RMFintColorCCC"> 最多上传5张 </van-col>
      </van-row>
      <footer>
          <van-row class="RMmarginTopMax">
              <van-col offset="2" span="20">
                  <van-button type="primary" native-type="submit" size="large" class="submitStyleBtn">
                      提交
                      </van-button>
              </van-col>
          </van-row>
      </footer>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      columns: ["不想要了", "有便宜的价格", "卖家货物不齐"],
      showPicker: false,
      arrowA: "arrow",
      textValue: "",
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
    };
  },
  methods: {
    refundMoneyNext() {
      this.$router.back();
    },
    refundNext() {
      this.$router.push("/refundMoney");
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    showPickerDown() {
      this.showPicker = true;
      this.arrowA = "arrow-down";
    },
    showPickerUp() {
      this.arrowA = "arrow";
    },
    onSubmit(values) {
      console.log("submit", values);
    },
  },
};
</script>

<style>
.RMFintColor {
  position: fixed;
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #4bd863;
  z-index: 9999;
  padding: 10px 0;
}
.saleReturnBroder {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.RMMarginTop {
  /* margin-top: 35px; */
}
.RMmarginTopMax{
    margin-top: 130px;
    
}
.RMtextBox {
  height: 50px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.RMPaddingMax {
  padding: 15px 0;
}
.RMPaddingSmall {
  padding: 10px 0;
}
.saleReturnPaddingXMax {
  padding: 20px 0;
}
.RMFintSizeMax {
  font-size: 16px;
  font-weight: 600;
}
.RMBorderStyleTop {
  border-top: 1px solid #ccc;
}
.RMPaddingTopSmall {
  padding-top: 10px;
}
.RMRMPaddingSmall {
  padding: 10px 0;
}
.RMFintSizeSmall {
  font-size: 16px;
  font-weight: 700;
}
.RMFintSizeSmallS {
  font-size: 16px;
}
.RMFintColorRed {
  color: red;
}
.RMFintColorCCC {
  color: rgb(97, 92, 92);
}
.RMseltectBox {
  height: 50px;
  line-height: 42px;
}
.van-field__control {
  font-size: 16px;
}
.heightSelect {
  height: 350px;
}
.RMIptBox {
  font-size: 16px;
  border: 0;
}
.RMpadiingXXMAX {
  padding-top: 40px;
}
.submitStyleBtn{
    background-color: #4bd863;
    color: #fff;
} 
</style>